<template>
    <div class="jobdetail">
        <van-nav-bar title="职位详情" left-text="返回" right-text="首页" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />

        <div class="main">
            <div class="name">
                <span> {{jobInfo.name}}</span>
            </div>
            <div class="salary">
                <span>{{jobInfo.salary}}元/月</span>
            </div>
            <div class="need">
                <span>{{jobInfo.need}}</span>
            </div>
            <div class="favor">
                <van-notice-bar color="rgb(87,129,184)" background="#ecf9ff" left-icon="gift-o" round>
                    五险一金，节假日双休，加班补助，加班补助
                </van-notice-bar>
            </div>
            <div class="obligation">
                <span class="require">职位详情</span>
                <div class="require_title">
                    <span>职位要求:</span>
                </div>
                <div class="require_text">
                    <span>
                        {{jobInfo.obligation}}
                    </span>
                </div>

            </div>
            <!-- <div class="apply" @click="gotoDeliver(jobInfo.companyId)">
                <span>马上申请</span>
            </div> -->
            <div class="message">
                <div>
                    <span class="companyInfo">公司信息</span>
                </div>
                <div class="goto"><span class="address">{{jobInfo.address}}</span>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="img">
                <img src="@/assets/声明.png" alt="">
            </div>

        </div>
        <div class="footer">
            <van-goods-action>
                <van-goods-action-icon icon="share-o" text="分享" />
                <van-goods-action-icon icon="chat-o" text="聊一聊" />
                <van-goods-action-button color="rgb(255, 93, 78)" type="danger" text="申请职位"
                    @click="gotoDeliver(jobInfo.companyId,jobInfo.professionId,jobInfo.name)" />
            </van-goods-action>
        </div>
    </div>

</template>

<script>
import nav from "@/mixin/nav";
import { jobDetail } from '@/service/job/jobservice'
export default {
    mixins: [nav],
    data() {
        return {
            id: "",
            jobDetail: {},
            jobInfo: {}
        }
    },
    async created() {
        this.id = this.$route.params && this.$route.params.id
        let { data } = await jobDetail(this.id)
        this.jobDetail = data;
        console.log(JSON.parse(JSON.stringify(data.data)));
        this.jobInfo = data.data
    },
    mounted() {
        window.scrollTo(0, 0);
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        onClickRight() {
            this.$router.push("/")
        },
        gotoDeliver(companyId, professionId, name) {
            this.$router.push({
                path: `/deliver/${companyId}/${professionId}/${name}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
deep {
    .app .van-goods-action {
        font-size: 30px !important;
    }
}

.jobdetail {
    width: 100%;

}

.van-nav-bar {
    width: 100%;
    position: fixed;
    top: 0;
    margin-bottom: 46px;
}

.main {
    div {
        margin-bottom: 15px;
    }

    width: 100%;
    // height: 1000px;


    margin-top: 46px;
    padding: 10px;

    .name {
        width: 100%;

        span {
            font-size: 20px;
            font-weight: 700;
        }
    }

    .salary {
        margin-bottom: 0;

        span {
            font-size: 16px;
            color: rgb(255, 85, 46);
        }
    }

    .need {
        margin-bottom: 15px;
    }

    .van-notice-bar {
        border-radius: 20px;
        height: 24px;

    }

    .favor {
        margin-bottom: 20px;
    }

    .obligation {
        margin-bottom: 20px;

        span {
            color: grey;
            font-size: 16px;
            line-height: 20px;

        }

        .require {
            display: block;
            color: #000;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;

        }
    }

    .apply {
        width: 100%;
        height: 50px;
        background-color: rgb(255, 93, 78);
        text-align: center;
        line-height: 50px;
        border-radius: 10px;

        span {
            font-size: 18px;
            color: #fff;
            font-weight: 800;

        }
    }

    .message {
        .companyInfo {
            font-size: 20px;
            font-weight: 700;
        }

        .goto {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 10px;
        }

        .address {
            font-size: 16px;
        }

    }

    .img {
        width: 100%;
        height: 110px;
        margin-top: 15px;

        img {
            width: 100%;
        }
    }
}

.van-goods-action-button {
    height: 45px !important;
    color: #fff;
    font-weight: 800;
    border-radius: 10px !important;
}

.van-goods-action {
    height: 60px;
    border: 1px solid #fff;
    font-size: 20px;
}
</style>